<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 上传图片 -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap1.css" />
    <link rel="stylesheet" type="text/css" href="../css/style1.css">
    <link rel="stylesheet" href="../css/ssi-uploader1.css"/>
    <!-- 上传图片 -->
    <link href="../css/main.css" rel="stylesheet">
	<title>一级菜单第一个</title>
</head>
<body>
	<div class="main">
		<div class="content">
			<div class="content_title"><p>发布标题</p></div>
			<div class="input_char40"><input type="text" name="" placeholder="请在这里输入标题" maxlength="40">&nbsp;&nbsp;<span>0/40</span></div>
		</div>
		<div class="content">
			<div class="content_title"><p>发布标签</p></div>
			<div class="select_char">
				<select>
					<option>卡解释多好</option>
					<option>卡解释多好</option>
					<option>卡解释多好</option>
					<option>卡解释多好</option>
				</select>
			</div>
		</div>
		<div class="content">
			<div class="content_title"><p>发布编辑</p></div>
			<div class="content_part"><div style="width: 100%;height:400px">现在中间随便添一点</div></div>
		</div>
		
		<div class="content content1">
			<div class="content_title">
				<p>报名编辑</p>
			</div>
			<div class="issue_toggle">
				<div class="input_char20">
					<span class="input_title">姓名</span>
					<input type="text" name="">&nbsp;&nbsp;
					<span>0/20</span>
				</div>
				<div class="input_char20 input_char21">
					<span class="input_title">联系电话</span>
					<input type="text" name="" maxlength="20"><span class="left-45">0/20</span>
				</div>
				<div class="input_char20 input_char21">
					<span class="input_title">学院</span>
					<input type="text" name="" maxlength="20"><span class="left-45">0/20</span>
				</div>
				<div class="input_char20 input_char21">
					<input type="text" name="" maxlength="6" placeholder="2-6个字" class="input_in" minlength="2">
					<input type="text" name="" maxlength="20"><span class="left-45">0/20</span>
					<a href="javascript:void(0)" class="del_opt del_opt13">删除</a>
				</div>
				<div class="add_input">
					<a href="javascript:void(0)" class="add_input_a">+新增条目</a>
				</div>
			</div>	
		</div>
		
		<div class="content_out">
			<div class="mar_bot18">
				<span class="bold wid100">发布编辑样式</span>
			</div>
			<div class="mar_bot18">
				<span class="bold">封面</span>
				<span class="grey">*建议尺寸：540*438像素</span>
			</div>
			<div class="mar_bot18">
				<input type="file" multiple id="ssi-upload1" class="ssi_upload_main local_load" />
			</div>

			<div class="mar_bot18 tac operate">
				<a href="javascript:void(0)" class="operate1">保存</a>
				<a href="javascript:void(0)" class="operate2">预览</a>
				<a href="javascript:void(0)" class="operate3">发布</a>
			</div>
			
		</div>
	</div>
	<div class="loading"><img src="../img/loading.gif"></div>
<div class="bgc000 disN">
	<div class="iPhone">
		<div class="i_main">
			<div class="i_header">
				<h3>搞笑现最酷图书馆&nbsp;&nbsp;网友：我要去当学霸</h3>
				<span>2016-12-11</span>
				<a href="javascript:void(0)">发布者</a>
				<span class="yellow">招新</span>
			</div>
			<div class="i_main_in">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;据了解，该图书馆不仅被评为河南最美建筑二等奖，它还是个很有“内容”的建筑。囊括了玻璃栈道、大滑梯直提扶梯并存、落地窗、私人阅读空间、私人影院、全WiFi覆盖等。此外，等到明年完全竣工后，它将24小时对外开放，60台苹果四代电脑机、300台IPAD可随时租借</p><img src="../img/amazing.gif">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;据了解，该图书馆不仅被评为河南最美建筑二等奖，它还是个很有“内容”的建筑。囊括了玻璃栈道、大滑梯直提扶梯并存、落地窗、私人阅读空间、私人影院、全WiFi覆盖等。此外，等到明年完全竣工后，它将24小时对外开放，60台苹果四代电脑机、300台IPAD可随时租借</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;据了解，该图书60台苹果四代电脑机、300台IPAD可随时租借</p>
			</div>
			<div class="form_in">
				<div class="form_title">
					<span class="left">&nbsp;</span>
					<span class="center">我要报名</span>
					<span class="right">&nbsp;</span>
				</div>
				<div class="form_circle">
					<h4>标题标题标题标题标题</h4>
					<dl>
						<dt>姓名</dt>
						<dd><input type="text" name=""></dd>
						<dt>学号</dt>
						<dd><input type="text" name=""></dd>
						<dt>联系方式</dt>
						<dd><input type="text" name=""></dd>
						<dt>问题1</dt>
						<dd><input type="text" name=""></dd>
						<dt>问题2</dt>
						<dd><input type="text" name=""></dd>
					</dl>
				</div>
				<div class="i_btn"><button class="upload">提交</button></div>
				<a href="javascript:void(0)" class="author">
					<img src="../img/ooYBAFROF1OIfql-AARw-onE9yMAACCTgOMXMAABHES215.jpg">
					<span>发布者</span>
					<i>作者</i>
				</a>
			</div>
		</div>
		<div class="d_close">
			<a href="javascript:void(0)" class="i_close">×</a>
		</div>
	</div>
</div>
<script src="../js/jquery-1.8.1.min.js"></script>
<!-- 上传图片 -->
<script src="../js/ssi-uploader.js"></script>
<script type="text/javascript">
	// 关闭预览
	$(".i_close").click(function () {
		$(".bgc000").hide()
	})
	$(".operate2").click(function () {
		$(".bgc000").show()
	})
	// 关闭加载
	function t() {
		$(".loading").fadeOut(3000)
	}
	t()
	// 以下是class控制的
	$('.ssi_upload_main').ssi_uploader({url:'#',maxFileSize:6,allowed:['jpg','gif','txt','png','pdf'],beforeUpload:function () {
		console.log("准备")
	}});
	$('.ssi_upload_main').on('beforeUpload.ssi-upload',function () {
		console.log("准备")
	})
</script>
<script type="text/javascript">
	$(".input_char40 input").keyup(function () {
		var length=$(this).val().length;
		$(this).next().html(length+'/40');
		
	})
	$(".input_char20 input").keyup(function () {
		var length=$(this).val().length;
		$(this).next().html(length+'/20');
		
	})

	
	// 第一部分-----添加选项
	// ---------------------------添加选项---------------------------
	$(".add_input_a").click(function () {
		var num=$(this).parents(".add_input").prev(".input_char20").index();
		var	div="\<div class=\"input_char20 input_char21\"\> \<input type=\"text\" name=\"\" maxlength=\"6\" placeholder=\"2-6个字\" class=\"input_in\" minlength=\"2\"\> \<input type=\"text\" name=\"\" maxlength=\"20\"\>\<span class=\"left-45\"\>0/20\</span\>  \<a href=\"javascript:void(0)\" class=\"del_opt del_opt13\"\>删除\</a\> \</div\>";

		$(this).parents(".add_input").before(div);
		
		// 保存新增条目
		$(".input_in").blur(function () {
			if ($(this).val().length>1) {
				$(this).css('border-color', '#fff');
			}
		})
		$(".input_in").focus(function () {
			$(this).css('border-color', '#bfbfbf');
		})
		// 保证添加的选项，具有删除的点击事件
		$(".del_opt").click(function () {
			$(this).parents(".input_char20").remove();
		})
		// 保证添加的选择可以计字数
		$(".input_char20 input").keyup(function () {
			var length=$(this).val().length;
			$(this).next().html(length+'/20');
		})
	})
	// 保存新增条目
	$(".input_in").blur(function () {
		if ($(this).val().length>1) {
			$(this).css('border-color', '#fff');
		}
	})
	$(".input_in").focus(function () {
		$(this).css('border-color', '#bfbfbf');
	})
	// 删除选项
	$(".del_opt").click(function () {
		$(this).parents(".input_char20").remove();
	})
	
	

	
</script>

</body>
</html>